<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- MUI -->
    <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- mescroll 上拉加载 下拉刷新 -->
    <link rel="stylesheet" href="./assets/plugins/mescroll/mescroll.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet" href="./assets/css/reset.css" />

    <!-- 公共样式 -->
    <link rel="stylesheet" href="./assets/css/common.css" />

    <!-- 页面独立的 -->
    <link rel="stylesheet" href="./assets/css/type.css" />

    <!-- jquery  -->
    <script src="./assets/js/jquery.min.js"></script>
</head>
<body>
    <!-- 搜索 -->
    <div class="search">
        <div class="box">
            <div class="icon">
                <span class="glyphicon glyphicon-search"></span>
            </div>

            <input class="input" name="search" placeholder="请输入关键词" required />

            <button id="search" class="btn" size="mini" type="default">搜索</button>
        </div>
    </div>

    <!-- 菜单 -->
    <div class="mui-content">
        <div id="typelist" class="mui-card mescroll">
            <ul class="mui-table-view"></ul>
        </div>
    </div>

    <div class="action">
        <a href="TypeAdd.html" class="mui-btn mui-btn-danger">添加分类</a>
    </div>
</body>
</html>
<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- MUI -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- mescroll 上拉加载 下拉刷新 -->
<script src="./assets/plugins/mescroll/mescroll.min.js"></script>

<!-- axios请求 -->
<script src="./assets/plugins/axios/axios.min.js"></script>
<script src="./assets/plugins/axios/request.js"></script>

<!-- cookie -->
<script src="./assets/plugins/cookie.js"></script>

<!-- 判断是否登录 -->
<script src="./assets/plugins/login.js"></script>

<script>
    //实例化wow.js
    new WOW().init();

    var business = cookie.get('business') ? JSON.parse(cookie.get('business')) : {};
    var page = 1; //当前页
    var limit = 10; //每页查询多少条
    var search = ''; //关键词

    //给导航条绑定事件
    $('.type .list').on('click', '.item', function(){
        typeid = $(this).data('typeid')
        DownCallback()
    });

    //给关键词绑定
    $('#search').click(function(e){
        e.preventDefault()
        search = $.trim($('input[name=search]').val())
        DownCallback()
    });

    //按下回车键
    $(`input[name=search]`).keydown(function(e){
        if(e.keyCode == 13)
        {
            search = $.trim($('input[name=search]').val())
            DownCallback()
        }
    });

    //下拉刷新和上拉加载配置
    var scroll = new MeScroll('typelist', {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: DownCallback //下拉刷新的回调
        },
        up: {
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            page:{
                size:limit
            },
            toTop:{ //配置回到顶部按钮
                duration: 600,
                src : "./assets/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset : 100
            }
        }
    })

    // 下拉刷新回调
    function DownCallback()
    {
        scroll.resetUpScroll()
        $('#typelist ul').empty()
    }

    // 上拉刷新回调
    async function UpCallback(current)
    {
        //当前页码值
        page = current.num
        limit = current.size

        //组装数据
        var data = {
            page:page,
            limit:limit,
            search:search,
            businessid:business.id,
        };

        var result = await POST({
            url:'/card/type/index',
            params: data
        })

        if(result.code == 0)
        {
            mui.toast(result.msg, {duration: 1000})
            // 暂无更多数据
            scroll.endBySize(0, 0)
            return false
        }

        var list = result.data.list
        var count = result.data.count

        //设置上拉加载状态
        scroll.endBySize(list.length, count)
        FetchList(list)
    }

    // 追加渲染数据
    function FetchList(list)
    {
        for(var item of list)
        {
            var temp = `
            <li class="mui-table-view-cell item">
                ${item.name}
                <button type="button" class="mui-btn mui-btn-primary" onClick="Edit(${item.id})">编辑</button>
                <button type="button" class="mui-btn mui-btn-danger" onClick="Del(${item.id})">删除</button>
            </li>
            `
            $('#typelist ul').append(temp)
        }
    }

    // 删除通讯录
    function Del(typeid = NULL)
    {
        //删除的通讯录ID
        typeid = typeid ? typeid : 0;

        //组装数据
        var data = {
            typeid: typeid,
            businessid: business.id
        }

        mui.confirm(
            '是否确认删除',
            '删除提醒',
            ['确认','取消'],
            async function(res)
            {
                if(res.index === 0)
                {

                    var result = await POST({
                        url: '/card/type/del',
                        params: data
                    })

                    // 关闭当前窗口
                    $('.mui-popup-backdrop').remove()
                    $('.mui-popup').remove()

                    if(result.code == 1)
                    {
                        mui.toast(result.msg)
                        scroll.resetUpScroll()
                        $('#typelist ul').empty()
                    }else
                    {
                        mui.toast(result.msg)
                        return false
                    }
                }
            }
        )
    }

    //编辑通讯录
    function Edit(typeid = NULL)
    {
        // 编辑的通讯录ID
        typeid = typeid ? typeid : 0;

        if(!typeid)
        {
            mui.toast('通讯录分类ID信息不存在')
            return false
        }
        
        location.href = `TypeEdit.html?typeid=${typeid}`
    }
</script>